<template>
  <div class="app-container">
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="酒店名称">
        <el-input
          v-model="searchForm.query.title"
          placeholder="索引名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
        <el-button type="success" @click="showDialog">新建酒店</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      :default-sort="{ prop: 'storeSize', order: 'descending' }"
      @sort-change="sortChange"
      empty-text="没有数据"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="pic" label="图片" sortable> </el-table-column>
      <el-table-column prop="title" fixed label="酒店名称"> </el-table-column>
      <el-table-column prop="businessDistrict" fixed label="商业区">
      </el-table-column>
      <el-table-column prop="address" fixed label="地址"> </el-table-column>
      <el-table-column prop="lon" label="经度" width="50"> </el-table-column>
      <el-table-column prop="lat" label="纬度" sortable> </el-table-column>
      <el-table-column prop="city" label="城市" sortable> </el-table-column>
      <el-table-column prop="price" sortable label="价格"> </el-table-column>
      <el-table-column prop="star" sortable label="星级"> </el-table-column>
      <el-table-column prop="fullRoom" label="满房状态" sortable :formatter="fullRoomFormat">
      </el-table-column>
      <el-table-column prop="impression" label="印象" sortable>
      </el-table-column>
      <el-table-column prop="favourablePercent" label="好评率" sortable>
      </el-table-column>

      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="handleDetail(scope.row)" type="text" size="small"
            >详情</el-button
          >
          <el-button @click="handleEdit(scope.row)" type="text" size="small"
            >编辑</el-button
          >
          <el-button type="text" size="small" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        style="margin-top: 10px"
        layout="sizes, prev, pager, next"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="searchForm.size"
        :total="searchForm.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
    </el-pagination>
    <JNPF-Form v-if="formVisible" ref="JNPFForm" @refresh="refresh" />
  </div>
</template>

<script>
import JNPFForm from "./form";
import { addHotel, delHotel, listHotel } from "@/api/hotel";

export default {
  name: "hotellist",
  components: { JNPFForm },
  data() {
    return {
      tableData: [],
      searchForm: {
        query: {
          title: "",
        },
        from: 0,
        size: 10,
        total: 0
      },
      formVisible: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      const _self = this;
      listHotel(this.searchForm)
        .then((res) => {
          _self.loading = false;
          _self.tableData = res.data.data;
          _self.searchForm.total = parseInt(res.data.total);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    sortChange({ column, prop, order }) {},
    handleDelete(row) {
      const _self = this;
      delHotel(row.id).then((res) => {
        if (res.code == 20000) {
          this.$message({
            message: res.data,
            type: "success",
          });
          _self.getList();
        }
      });
    },
    handleDetail(row) {
      const _self = this;
      detailIndex(row.indexName).then((res) => {
        if (res.code == 20000) {
          const obj = JSON.parse(res.data);
          _self.jsonData = obj;
          _self.dialogMapping = true;
          _self.selectedIndexName = row.indexName + "详情";
        }
      });
    },
    showDialog() {
      this.formVisible = true;
      this.$nextTick(() => {
        this.$refs.JNPFForm.init(null, false);
      });
    },
    onSearch() {
      this.getList();
    },
    refresh() {
      this.getList();
    },
    handleEdit(row) {
      this.formVisible = true;
      this.$nextTick(() => {
        this.$refs.JNPFForm.init(row.id, false);
      });
    },
    fullRoomFormat(row, column, cellValue, index) {
      if (cellValue == "false") {
        return "未满";
      }
      return "已满";
    },
    handleCurrentChange(val) {
      this.searchForm.from = val;
      this.onSearch();
    },
    handleSizeChange(val) {
      this.searchForm.size = val;
      this.onSearch();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
